<template>
  <div class="myroles">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加角色 -->
    <el-button type="primary" plain class="add-roles-btn" @click="addRoles">添加角色</el-button>
    <!-- 列表 -->
    <el-table
      :data="rolesList"
      border
      stripe
      style="width: 100%"
      v-loading="loading">
      <el-table-column type="expand" label="查看" width="50">
      <template slot-scope="scope">
        <el-row v-for="firstData in scope.row.children" :key="firstData.id">
          <el-col :span="4">
            <el-tag closable>{{firstData.authName}}</el-tag>
            <i class="el-icon-arrow-right"></i>
          </el-col>
          <el-col :span="20">
            <el-row v-for="secondData in firstData.children" :key="secondData.id">
              <el-col :span="4">
                <el-tag closable type="success">{{secondData.authName}}</el-tag>
                <i class="el-icon-arrow-right"></i>
              </el-col>
              <el-col :span="20">
                <el-tag closable type="warning" v-for="thirdData in secondData.children" :key="thirdData.id">
                  {{thirdData.authName}}
                </el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :span="24" v-if="scope.row.children.length === 0">
          <el-col>
            <el-tag>该账户暂无权限</el-tag>
          </el-col>
        </el-row>
      </template>
      </el-table-column>
      <el-table-column
        type="index"
        label="编号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称">
      </el-table-column>
      <el-table-column
        prop="roleDesc"
        label="描述">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" plain size="small" @click="editRole(scope.row)"></el-button>
          <el-button type="warning" icon="el-icon-success" plain size="small"></el-button>
          <el-button type="danger" icon="el-icon-delete" plain size="small" @click="deleteRole"></el-button>
          <!-- 删除用户弹出层 -->
          <el-dialog
            title="删除确认"
            :visible.sync="deleteRolesDialogVisible"
            width="30%"
            center>
            <span>确认删除该角色吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="deleteRolesDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteTrue(scope.row.id)">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 修改用户弹出层 -->
          <el-dialog title="修改角色" :visible.sync="editRolesVisible">
            <el-form :model="editRolesForm" :rules="myrules" ref="editRef">
              <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
                <el-input v-model="editRolesForm.roleName"></el-input>
              </el-form-item>
              <el-form-item label="角色描述" :label-width="formLabelWidth" prop="roleDesc">
                <el-input v-model="editRolesForm.roleDesc"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="editRolesVisible = false">取 消</el-button>
              <el-button type="primary" @click="editRolesTrue('editRef')">确 定</el-button>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加用户弹出层 -->
    <el-dialog title="添加用户" :visible.sync="addRolesVisible">
      <el-form :model="addRolesForm" :rules="myrules" ref="addRef">
        <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
          <el-input v-model="addRolesForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" :label-width="formLabelWidth" prop="roleDesc">
          <el-input v-model="addRolesForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addRolesVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRolesTrue('addRef')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {roleList, addRoles, deleteRole, editRole} from '@/api'
export default {
  data () {
    return {
      loading: true,
      rolesList: [],
      addRolesVisible: false,
      formLabelWidth: '120px',
      deleteRolesDialogVisible: false,
      addRolesForm: {
        roleName: '',
        roleDesc: ''
      },
      editRolesVisible: false,
      editRolesForm: {
        id: '',
        roleName: '',
        roleDesc: ''
      },
      myrules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        roleDesc: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    renderList () {
      roleList()
        .then(res => {
          // console.log(res)
          if (res.meta.status === 200) {
            this.rolesList = res.data
            setTimeout(() => {
              this.loading = false
            }, 1000)
          }
        })
    },
    // 添加角色弹窗控制
    addRoles () {
      this.addRolesVisible = true
    },
    // 添加角色
    addRolesTrue (formName) {
      this.$refs[formName].validate((valide) => {
        if (valide) {
          addRoles(this.addRolesForm)
            .then(res => {
              // console.log(res)

              if (res.meta.status === 201) {
                this.renderList()
                this.addRolesVisible = false
                this.$notify({
                  title: '创建成功',
                  message: res.meta.msg,
                  type: 'success',
                  offset: 100
                })
              } else {
                this.$notify({
                  title: '创建失败',
                  message: res.meta.msg,
                  type: 'error',
                  offset: 100
                })
              }
            })
        } else {
          this.$message.error('校验失败，请重新输入')
        }
      })
    },
    // 删除角色弹窗
    deleteRole () {
      this.deleteRolesDialogVisible = true
    },
    // 删除角色
    deleteTrue (id) {
      deleteRole(id)
        .then(res => {
          if (res.meta.status === 200) {
            this.deleteRolesDialogVisible = false
            this.renderList()
            this.$notify({
              title: '删除成功',
              message: res.meta.msg,
              type: 'success',
              offset: 100
            })
          } else {
            this.$notify({
              title: '删除失败',
              message: res.meta.msg,
              type: 'error',
              offset: 100
            })
          }
        })
    },
    // 修改角色弹窗
    editRole (row) {
      this.editRolesVisible = true
      this.editRolesForm.roleName = row.roleName
      this.editRolesForm.roleDesc = row.roleDesc
      this.editRolesForm.id = row.id
    },
    // 修改角色
    editRolesTrue (formName) {
      this.$refs[formName].validate((valide) => {
        if (valide) {
          editRole(this.editRolesForm)
            .then(res => {
              // console.log(this.editRolesForm.roleName)
              if (res.meta.status === 200) {
                this.renderList()
                this.editRolesVisible = false
                this.$notify({
                  title: '操作成功',
                  message: res.meta.msg,
                  type: 'success',
                  offset: 100
                })
              } else {
                this.$notify({
                  title: '操作失败',
                  message: res.meta.msg,
                  type: 'error',
                  offset: 100
                })
              }
            })
        } else {
          this.$message.error('校验错误，请检查后重试')
        }
      })
    }
  },
  created () {
    this.renderList()
  }
}
</script>

<style lang="scss" scoped>
  .myroles{
    .add-roles-btn{
      margin-bottom: 15px;
    }
    .el-tag{
      margin: 5px
    }
  }
</style>
